<template>
  <div class="ne-container">
    <van-skeleton :row="12" :loading="loading">
      <div class="q-title">{{article.policyTitle}}</div>
      <div class="q-date">{{article.policyTime || article.createTime}}</div>
      <div v-html="article.policyContent"></div> <!-- 图片列表 -->
      <div class="image-list">
        <img v-for="(img, index) in article.images"
             :key="index"
             :src="img"
             mode="aspectFill"
             class="image"
             @tap="$previewImage(article.images,index)"/>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
  import {tbPolicyAnnouncementsList} from "../../api/tbPolicyAnnouncements";
  export default {
  name: 'wx_pages_llhz_noticeDetail',
    data(){
      return{
        article:{},
        loading:false
      }
    },
    methods:{
      async search(){
        const {indexCode} = this.$route.query
        if(indexCode){
          this.loading = true
          let res = await tbPolicyAnnouncementsList({indexCode})
          this.loading = false
          uni.stopPullDownRefresh()
          if(res.data && res.data.length>0){
            this.article = res.data.pop()
            const { policyPicUrl1, policyPicUrl2, policyPicUrl3 } = this.article;
            this.article.images = [policyPicUrl1, policyPicUrl2, policyPicUrl3]
                .filter(url => url && typeof url === 'string' && url.trim() !== '')
                .map(url => url.trim());
          }else{
            this.article = {}
          }
        }
      }
    },
    onLoad(){
      this.search()
    }
  }
</script>
<style lang="scss" scoped>
.q-title{
  color: $uni-color-primary;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.q-date{
  font-size: 13px;
  color: #666666;
  margin-bottom: 10px;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.image {
  width: 31%;
  height: 100px;
  border-radius: 4px;
}
</style>
